<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设备告警</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid" id="LAY-app-message">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">待确认<span id="badge1" class="layui-badge">0</span></li>
                <li>处理中</li>
                <li>已处理</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <table id="alarm-table1" lay-filter="alarm-table"></table>
                </div>
                <div class="layui-tab-item">
                    <table id="alarm-table2" lay-filter="alarm-table"></table>
                </div>
                <div class="layui-tab-item">
                    <table id="alarm-table3" lay-filter="alarm-table"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="toolbar-operation">
    {{#  if(d.state == 0){ }}
    <!--<a class="layui-btn layui-btn-xs" lay-event="report">上报缺陷</a>-->
    <a class="layui-btn layui-btn-xs" lay-event="confirm">确认告警</a>
    {{#  } }}
    {{#  if(d.state == 1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="handle">处理告警</a>
    {{#  } }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="/layui/layui.js"></script>
<script>
    layui.config({
        base: '/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form'], function () {

        var table = layui.table;
        var $ = layui.$;

        table.render({
            elem: '#alarm-table1',
            url: '/device-alarms',
            title: '',
            skin: 'line',
            cols: [[
                {field: 'stationName', title: '建筑群', width: 150},
                {field: 'deviceName', title: '物联设备', width: 200},
                {field: 'msg', title: '告警内容', width: 300},
                {field: 'levelText', title: '告警级别', width: 100},
                {field: 'createTime', title: '发生时间', width: 300},
                {fixed: 'right', title: '操作', toolbar: '#toolbar-operation', width: 300}
            ]],
            where: {
                state: 0
            },
            page: true,
            done: function (res, curr, count) {
                if (count > 0) {
                    $('#badge1').show();
                    $('#badge1').text(count);
                } else {
                    $('#badge1').hide();
                }
            }
        });

        table.render({
            elem: '#alarm-table2',
            url: '/device-alarms',
            title: '',
            skin: 'line',
            cols: [[
                {field: 'stationName', title: '建筑群', width: 150},
                {field: 'deviceName', title: '物联设备', width: 200},
                {field: 'msg', title: '告警内容', width: 300},
                {field: 'levelText', title: '告警级别', width: 100},
                {field: 'createTime', title: '发生时间', width: 300},
                {fixed: 'right', title: '操作', toolbar: '#toolbar-operation', width: 300}
            ]],
            where: {
                state: 1
            },
            page: true
        });

        table.render({
            elem: '#alarm-table3',
            url: '/device-alarms',
            title: '',
            skin: 'line',
            cols: [[
                {field: 'stationName', title: '建筑群', width: 150},
                {field: 'deviceName', title: '物联设备', width: 200},
                {field: 'msg', title: '告警内容', width: 300},
                {field: 'levelText', title: '告警级别', width: 100},
                {field: 'createTime', title: '发生时间', width: 300},
                {fixed: 'right', title: '操作', toolbar: '#toolbar-operation', width: 300}
            ]],
            where: {
                state: 2
            },
            page: true
        });

        table.on('tool(alarm-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'report') {
                window.location.href = '/fault-info.html?alarmId=' + data.id;
            } else if (obj.event === 'confirm') {
                $.get('/device-alarms/' + data.id + '/confirm', function (res) {
                    table.reload('alarm-table1');
                    table.reload('alarm-table2');
                    table.reload('alarm-table3');
                });
            } else if (obj.event === 'handle') {
                $.get('/device-alarms/' + data.id + '/handle', function (res) {
                    table.reload('alarm-table1');
                    table.reload('alarm-table2');
                    table.reload('alarm-table3');
                });
            } else if (obj.event === 'del') {
                layer.confirm('确定删除该告警吗？', function (index) {
                    $.ajax({
                        url: '/device-alarms/' + data.id,
                        type: 'DELETE',
                        success: function (result) { // 成功回调函数
                            table.reload('alarm-table1');
                            table.reload('alarm-table2');
                            table.reload('alarm-table3');
                        }
                    });
                    layer.close(index);
                });
            }
        });

    });
</script>
</html>